<template>
  <view class="container">
    <view>
      <u-navbar
        backIconColor="#fff"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      >
      </u-navbar>
      <!-- </view> -->
      <view class="" style="position: relative">
        <view
          class="contentBg"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('video-bg.png')})`,
            height: `${190 + statusBarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`
          }"
        >
        </view>
      </view>
      <view class="content">
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="t-l dis-flex">
            <u-avatar src="" size="120"></u-avatar>
            <view class="u-info">
              <view>用户姓名</view>
              <view class="id" v-if="isUser">求职者</view>
              <view class="id" v-else>招聘者</view>
            </view>
          </view>
          <view class="t-r dis-flex flex-y-center" @click="changeType">
            <u-icon style="margin: 2rpx" name="/static/sf_icon.png" size="48"></u-icon>
            <text class="r-text" v-if="isUser">切换企业身份</text>
            <text class="r-text" v-else>切换求职身份</text>
          </view>
        </view>
        <view class="card dis-flex flex-y-between" v-if="isUser">
          <view
            class="amount-item"
            @click="routeTo(amount.path)"
            v-for="(amount, i) in userAmount"
            :key="i"
          >
            <view class="count">{{ amount.count }}</view>
            <view class="name">{{ amount.name }}</view>
          </view>
        </view>
        <view class="card dis-flex flex-y-between" v-else>
          <view
            class="amount-item"
            @click="routeTo(amount.path)"
            v-for="(amount, i) in companyAmount"
            :key="i"
          >
            <view class="count">{{ amount.count }}</view>
            <view class="name">{{ amount.name }}</view>
          </view>
        </view>
        <view class="service" v-if="isUser">
          <view
            class="service-item"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in userServices"
            :key="ser.id"
          >
            <view class="dis-flex flex-y-center">
              <u-icon :name="ser.icon" size="44"></u-icon>
              <view class="service-name">{{ ser.name }}</view>
            </view>
            <view>
              <u-image src="@/static/more.png" width="14rpx" height="28rpx"></u-image>
            </view>
          </view>
        </view>
        <view class="service" v-else>
          <view
            class="service-item"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in companyServices"
            :key="ser.id"
          >
            <view class="dis-flex flex-y-center">
              <u-icon :name="ser.icon" size="44"></u-icon>
              <view class="service-name">{{ ser.name }}</view>
            </view>
            <view>
              <u-image src="@/static/more.png" width="14rpx" height="28rpx"></u-image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      isUser: false,
      userAmount: [
        {
          id: 'post',
          name: '已投简历',
          count: '10',
          path: '/users/job/post-resume'
        },
        {
          id: 'star',
          name: '我的收藏',
          count: '6',
          path: '/users/job/star'
        }
      ],
      companyAmount: [
        {
          id: 'post',
          name: '收到简历',
          count: '10',
          path: '/users/job/receive-resume'
        },
        {
          id: 'star',
          name: '招聘职位',
          count: '6',
          path: '/users/job/work-list'
        }
      ],
      userServices: [
        {
          id: 'zxjl',
          name: '我的简历',
          icon: '/static/zxjl.png',
          path: '/users/job/resume'
        },
        {
          id: 'grzl',
          name: '个人资料',
          icon: '/static/grzl.png',
          path: '/users/job/user-info'
        }
      ],
      companyServices: [
        {
          id: 'fbzw',
          name: '发布职位',
          icon: '/static/fbzw.png',
          path: '/users/job/push-work'
        },
        {
          id: 'zwgl',
          name: '职位管理',
          icon: '/static/zwgl.png',
          path: '/users/job/work-operate'
        },
        {
          id: 'qyxx',
          name: '企业信息',
          icon: '/static/qyxx.png',
          path: '/users/job/company-info'
        },
        {
          id: 'wdxx',
          name: '我的信息',
          icon: '/static/wdxx.png',
          path: '/users/job/company-user'
        }
      ],
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList() {},
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    changeType() {
      const app = this
      uni.showLoading({
        title: '切换中',
        mask: true
      })
      setTimeout(function () {
        app.isUser = !app.isUser
        uni.hideLoading()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

.container {
  background-color: rgb(248, 248, 248);
  height: 100vh;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.content {
  position: relative;
  padding: 30rpx 0;

  .top {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    height: 120rpx;

    .u-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 12rpx 20rpx;
      font-size: 34rpx;
      color: #ffffff;

      .id {
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: #fff1e8;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #ff6f10;
        text-align: center;
      }
    }

    .t-r {
      width: 220rpx;
      height: 52rpx;
      background: #e8fffc;
      border-radius: 26rpx;
      opacity: 0.9;
      line-height: 52rpx;

      .r-text {
        font-size: 26rpx;
        color: #10a28f;
      }
    }
  }

  .card {
    height: 160rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx 150rpx;
    margin: 0 20rpx;
  }

  .amount-item {
    text-align: center;
    line-height: 60rpx;

    .count {
      font-size: 32rpx;
      font-weight: bold;
    }

    .name {
      font-size: 26rpx;
    }
  }

  .service {
    // width: 100%;
    margin: 0 20rpx;
    // height: 180rpx;
    background: #ffffff;
    margin-top: 20rpx;

    .service-item:last-child {
      border: none;
    }

    .service-item {
      // width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 23rpx;
      align-items: center;
      font-size: 26rpx;
      color: #333333;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #e6e6e6;
      margin: 0 20rpx;

      .service-name {
        font-size: 30rpx;
        color: #333333;
        margin-left: 30rpx;
      }
    }
  }
}

.mr-20 {
  margin-right: 40rpx;
}
</style>
